import {PMContent, PMLayout, PMNav} from '@/components/others/layout'
import PmBaseInfo from '@/components/others/pm/pmBaseInfo'
import {CnMediumSpan} from '@/components/text'
import {useRouteQuery} from '@/hooks/pageRedirect'
import useMyPm from '@/hooks/pm/myPm'
import useOwner from '@/hooks/pm/owner'
import {TargetBaseInfoPageQuery, toInitiateAssessmentCheck} from '@/libs/pageRedirect'
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  setup() {
    const {getQueryData, router} = useRouteQuery({queryKeys: ['defaultPmId', 'title', 'type']})
    let pageQuery = getQueryData<TargetBaseInfoPageQuery>()
    if (!pageQuery) {
      router.back()
      return () => (
        <PMLayout>
          <PMNav backClick={handleBackClick}></PMNav>
        </PMLayout>
      )
    }

    const {defaultPmId, type: pmBaseInfoType, title} = pageQuery

    const {getPmByPmId} = useMyPm()

    const {udpateOwner, owner} = useOwner()

    function handleBackClick() {
      if (!pageQuery?.pmFormId) return
      toInitiateAssessmentCheck({pmFormId: pageQuery.pmFormId, isRefersh: 0})
    }
    onMounted(() => {
      getPmByPmId({
        pmId: defaultPmId,
        success: data => {
          udpateOwner({ownerDDId: data.pmUserDDId})
        }
      })
    })

    return () => (
      <PMLayout>
        <PMNav backClick={handleBackClick}>
          <div class='h-full flex items-center'>
            <CnMediumSpan class='text-16'>{title || '绩效详情'}</CnMediumSpan>
          </div>
        </PMNav>
        <PMContent>
          {owner.value ? (
            <PmBaseInfo
              type={pmBaseInfoType}
              userDDId={owner.value.userId}
              defaultPmId={Number(defaultPmId)}
            ></PmBaseInfo>
          ) : null}
        </PMContent>
      </PMLayout>
    )
  }
})
